<template>
  <view>
    <m-top :autoBack="false" :bgChangeByScroll="true" bgColor="#8C82FF" @getHeight="getGlHeight">
      <!-- <image
        v-if="hasLogin"
        @click.stop="$u.route('/pages-mine/setting/card')"
        class="setting-icon"
        src="@/static/icon/mine-setting.png"
      ></image> -->
    </m-top>

    <m-container :top="glTop">
      <view class="mgt32 pdv40">
        <!--  -->
        <view class="mine-header flex align-center">
          <u-avatar :src="getImgUrl(userInfo.tmb_icon)" @click="navigateLogin" size="120rpx"></u-avatar>
          <view class="mine-header__content">
            <view class="c333 font36 fw500" @click="navigateLogin">{{
              hasLogin ? userInfo.tmb_name || "暂无" : "未登录"
            }}</view>
            <view class="c666 font28 mgt20" @click="navigateLogin">{{
              hasLogin ? userInfo.tmb_position || "暂无" : "点此进行登录"
            }}</view>
          </view>

          <image
            v-if="hasLogin"
            @click="$u.route('/pages-mine/setting/index')"
            class="mglauto mine-header__edit"
            src="@/static/icon/mine-edit.png"
          ></image>
        </view>

        <view class="mgt20 contact-box" v-if="linkUser.account">
          <view class="c481 font28">{{ linkUser.name }}-{{ linkUser.account }}</view>
          <view class="mgt20 font24 h2">您的大会专属联系人，将全程为您服务</view>

          <image src="@/static/icon/call.png" @click="makePhoneCallHandler"></image>
        </view>

        <!--  -->
        <view class="mine-tools">
          <m-card :padding="false">
            <view class="mine-tools__box flex">
              <view
                class="mine-tools__box-item flex column align-center"
                v-for="(item, index) in tools"
                :key="index"
                @click="toolClickHandler(item)"
              >
                <image class="icon" :src="item.src"></image>
                <view class="mgt30 c333 font24">{{ item.text }}</view>
              </view>
            </view>
          </m-card>
        </view>

        <!--  -->
        <view class="mine-trip" v-if="!hasLogin || (scheduleList.length === 0 && myBookingList.length === 0)">
          <panel-trip :login="hasLogin"></panel-trip>
        </view>
        <template v-else>
          <!-- 演讲日程 -->
          <view class="mgt40" v-if="scheduleList.length > 0">
            <panel-title :showMore="true" moreTheme="other">
              <template #right>
                <image
                  @click.stop="bookingCardShowHandler(0)"
                  class="rotate-img"
                  :class="{
                    'rotate-img-up': bookingCardShow[0],
                  }"
                  style="width: 40rpx; height: 40rpx"
                  src="@/static/icon/arrow-right.png"
                ></image>
              </template>
              <text>演讲日程</text>
            </panel-title>

            <panel-booking v-if="bookingCardShow[0]" :options="scheduleList" :showTips="true"></panel-booking>
          </view>

          <!-- 我的预约 -->
          <view class="mgt40" v-if="myBookingList.length > 0">
            <panel-title :showMore="true" moreTheme="other">
              <template #right>
                <image
                  @click.stop="bookingCardShowHandler(1)"
                  style="width: 40rpx; height: 40rpx"
                  class="rotate-img"
                  :class="{
                    'rotate-img-up': bookingCardShow[1],
                  }"
                  src="@/static/icon/arrow-right.png"
                ></image>
              </template>
              <text>我的预约</text>
            </panel-title>

            <panel-booking v-if="bookingCardShow[1]" :options="myBookingList"></panel-booking>
          </view>
        </template>
      </view>
    </m-container>

    <!-- 参会二维码弹窗 -->
    <panel-qrcode ref="qrcodeInstance" :user="userInfo"></panel-qrcode>

    <m-tabbar path="pages/mine/index"></m-tabbar>
  </view>
</template>

<script>
import GlTopMixin from "@/mixins/global-top";
import PanelTrip from "./components/card-trip";
import PanelQrcode from "./components/panel-qrcode.vue";
import UserInfoMixin from "@/mixins/modules/user.js";
import PanelTitle from "@/pages/index/components/title.vue";
import PanelBooking from "./components/card-book.vue";
import { getMyOrderApi } from "@/api/modules/mine.js";

export default {
  mixins: [GlTopMixin, UserInfoMixin],
  components: {
    PanelTrip,
    PanelQrcode,
    PanelTitle,
    PanelBooking,
  },
  data() {
    return {
      myBookingList: [],
      scheduleList: [],
      bookingCardShow: [true, true],
      tools: [
        {
          text: "参会码",
          src: require("@/static/icon/mine-1.png"),
          click: () => {
            this.$refs.qrcodeInstance.show = true;
          },
        },
        // {
        //   text: "我的预约",
        //   src: require("@/static/icon/mine-2.png"),
        //   link: "/pages-mine/booking/index",
        // },
        {
          text: "我的行程",
          src: require("@/static/icon/mine-3.png"),
          link: "/pages-mine/trip/detail",
        },
        {
          text: "我的通知",
          src: require("@/static/icon/mine-4.png"),
          link: "/pages-mine/notice/index",
        },
        {
          text: "我的设置",
          src: require("@/static/icon/setting-grid.png"),
          link: "/pages-mine/setting/card",
        },
      ],
    };
  },

  watch: {
    hasLogin: {
      handler() {
        this.getMyOrder();
      },
    },
  },

  onShow() {
    this.getMyOrder();
  },

  methods: {
    async getMyOrder() {
      if (!this.hasLogin) return;
      try {
        const response = await getMyOrderApi();
        console.log(response);
        this.myBookingList = response.my_reserve || [];
        this.scheduleList = response.speech_schedule || [];
      } catch (error) {}
    },
    bookingCardShowHandler(index) {
      this.bookingCardShow.splice(index, 1, !this.bookingCardShow[index]);
    },
    toolClickHandler(item) {
      if (item.link) {
        uni.$u.route(item.link);
      }
      if (item.click) {
        item.click.call(this);
      }
    },

    makePhoneCallHandler() {
      const { account } = this.linkUser;
      uni.makePhoneCall({
        phoneNumber: account,
      });
    },

    navigateLogin() {
      if (this.hasLogin) {
        this.$u.route("/pages-mine/setting/index");
      } else {
        this.$u.route("/pages/login");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.setting-icon {
  width: 42rpx;
  height: 42rpx;
}

.mine-header {
  padding: 20rpx;

  &__content {
    margin-left: 20rpx;
    flex: 1;
  }

  &__avatar {
  }

  &__edit {
    flex-shrink: 0;
    width: 40rpx;
    height: 40rpx;
  }
}

.rotate-img {
  transform: rotate(90deg);
  transition: all 0.2s linear;
}

.rotate-img-up {
  transform: rotate(-90deg);
}

.mine-tools {
  margin-top: 44rpx;

  &__box {
    padding: 40rpx 0;

    &-item {
      flex: 1;

      .icon {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }
}

.mine-trip {
  margin-top: 76rpx;
}

.contact-box {
  background: linear-gradient(
    270deg,
    rgba(193, 172, 255, 0) 0%,
    rgba(193, 172, 255, 0.5) 49%,
    rgba(193, 172, 255, 0) 100%
  );
  // box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(72, 30, 193, 0.1);
  padding: 20rpx 40rpx;
  border-radius: 12rpx;
  position: relative;

  .h2 {
    color: rgba(#481ec1, 0.5);
  }

  image {
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    right: 40rpx;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
